import { App } from 'vue'
import Skeleton from './Skeleton/index.vue'
import Carousel from './Carousel/index.vue'
import More from './More/index.vue'
import City from './City/index.vue'
import errorImg from '@/assets/images/200.png'

import { useIntersectionObserver } from '@vueuse/core'


export default {
  // Vue2中是拿到Vue.component去注册全局组件
  // Vue3是拿到app去注册全局组件
  install (app: App) {
    app.component('XtxSkeleton', Skeleton)
    app.component('XtxCarousel', Carousel)
    app.component('XtxMore', More)
    app.component('XtxCity', City)

    // 在这里可以定义全局自定义指令
    app.directive('lazy', {
      mounted (el: HTMLImageElement, { value }) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 当我们el，也就是img出现了，我们就停止监听，并且去加载这个图片
            stop()
            // 当图片出现在可视区域的时候，才给它的src赋值，然后它才会发请求
            el.src = value
            el.onerror = function () {
              el.src = errorImg
            }
          }
        })
      }
    })
  }
}
